<script lang="ts" setup>
import { reactive } from "vue";

let person = reactive({
  name: "张三",
  age: 18,
});

//--=============
function ChangeName() {
  person.name += "~";
}

function ChangeAge() {
  person.age += 1;
}

function ChangPerson() {
  // person = {
  //   name: "李四",
  //   age: 30,
  // };

  Object.assign(person, { name: "李四", age: 80 });
}
</script>

<template>
  <h3>情况三: 监视 reactive</h3>
  <ul>
    <li>name:{{ person.name }}</li>
    <li>age:{{ person.age }}</li>
    <button @click="ChangeName">ChangeName</button>
    <button @click="ChangeAge">ChangeAge</button>
    <button @click="ChangPerson">修改整个人</button>
  </ul>
</template>

<style scoped>
button {
  margin: 0 10px;
}
</style>